<template>
	<view class="group-member-page">
		<view class="content">
			<view class="friend-list">
				<scroll-view style="height: 100vh; box-sizing: border-box" :scroll-y="true" :refresher-enabled="true"
					:refresher-triggered="triggered" @scrolltolower="scrolltolower" @refresherrefresh="onRefresh"
					refresher-background="#f5f6f7" refresher-default-style="black">
					<!-- 需要滚动的区域 -->
					<view class="friend-item" v-for="(item, index) in friendsList" :key="index">
						<view class="friend-item-content flex" @click="toUserTalk(item)">
							<view class="friend-item-info flex">
								<u-avatar :src="item.avatar" size="30" shape="square"></u-avatar>
								<view class="friend-item-info-name title-wrap flex">
									<text>{{ item.nickname }}</text>
									<view v-if="item.role == 1" class="role sh-fs-20 sh-m-l-20">管理员</view>
								</view>
							</view>
							<view>
								<text :class="item.online ? 'onLine' : 'outline'">
									{{ item.online ? "在线" : "离线" }}
								</text>
							</view>
						</view>
						<u-line></u-line>
					</view>
				</scroll-view>
				<view class="addFriends">
					<u-button type="primary" :hairline="true" shape="circle" @click="addShow = true">
						<view class="flex-item">
							<u-icon name="search" color="#fff" size="28"></u-icon>
							<text>添加对方的手机号码</text>
						</view>
					</u-button>
				</view>
			</view>
		</view>
		<u-popup :show="addShow" mode="center" @close="addShow = false">
			<view class="popup-content">
				<text>请输入需要添加的手机号码</text>
				<u-gap height="20" bgColor="#fff"></u-gap>
				<u-input placeholder="请输入手机号码" border="surround" type="number" maxlength="11" focus clerable
					v-model="addFriendsForm.mobile">
				</u-input>
				<u-gap height="20" bgColor="#fff"></u-gap>
				<u-button text="添加守护" type="primary" :focus="true" :clearable="true" @click="addSubmit"
					shape="circle"></u-button>
			</view>
		</u-popup>

		<u-toast ref="uToast1" />
	</view>
</template>

<script>
	import {
		friendsLists,
		friendsAdd
	} from "@/common/api/index";
	export default {
		data() {
			return {
				backgroundColor: "#F8F8F8",
				titleStyle: {
					fontSize: "26rpx",
				},
				friendsList: [], // 群组成员列表
				addFriendsForm: {
					mobile: "",
				},
				addShow: false,
				num: 20,
				triggered: false, // 下拉是否激活
				tabDetailList: [],
				total: 0,
				pageNum: 1,
				pageSize: 10,
			};
		},
		computed: {},
		onLoad() {},
		onShow() {
			this.getList();
		},
		created() {},
		mounted() {},
		methods: {
			// 获取群组成员
			async getList() {
				let res = await friendsLists();
				if (res.code == 1) {
					this.friendsList = res.data.lists;
					this.friendsList.forEach((item) => {
						item.show = false;
					});
				} else {
					this.showMsg(res.msg);
				}
			},
			// 添加群组成员弹框
			async addFriends() {
				this.addShow = true;
			},
			// 搜索好友
			search() {},
			// 添加群组成员弹框提交
			async addSubmit() {
				const formData = {
					mobile: this.addFriendsForm.mobile,
				};
				const {
					code,
					data,
					msg
				} = await friendsAdd(this.addFriendsForm);
				this.$refs.uToast1.show({
					message: msg,
					type: code == 1 ? "success" : "error",
					duration: 2000,
					position: "top",
				});
				this.addShow = code == 1 ? false : true;
			},
			// 上拉加载
			scrolltolower() {
				console.log("上拉加载");
				this.num += 10;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				// 开启下拉自定义样式
				this.triggered = true;
				this.num = 20;
				//  重新调用
				this.getList();
				// 1秒之后复位
				setTimeout((e) => {
					this.triggered = false;
				}, 1000);
			},
			toUserTalk(item) {
				this.toVuex("choseFriendInfo", item);
				let status = item.online;
				uni.navigateTo({
					url: "/pages/friends/talk?friend_id=" +
						item.user_id +
						"&frind_name=" +
						encodeURI(item.nickname) +
						"&friend_updateId=" +
						item.friend_id +
						"&online=" +
						status,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.group-member-page {
		background: #f8f8f8;
		overflow: hidden;
		box-sizing: border-box;
		box-sizing: border-box;

		.right-add {
			border: 1px solid #000;
			padding: 5rpx;
			box-sizing: border-box;
			border-radius: 50%;
		}

		.content {
			.friend-list {
				.friend-item {
					.friend-item-content {
						padding: 20rpx 50rpx;
						align-items: center;
						background-color: #fff;
						justify-content: space-between;

						.friend-item-info {
							align-items: center;
						}

						.friend-item-info-name {
							margin-left: 20rpx;
							align-items: flex-end;
							font-size: 36rpx;

							.role {
								color: #f60;
								border: 1rpx solid #f60;
								padding: 0 10rpx;
								border-radius: 8rpx;
							}
						}
					}
				}

				.addFriends {
					position: fixed;
					bottom: 0%;
					width: 100%;
					height: 10vh;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 60rpx;
					box-sizing: border-box;

					.flex-item {
						display: flex;
						align-items: center;
						justify-content: space-around;
					}
				}
			}

			.onLine {
				color: #22c903;
			}

			.outline {
				color: #aaaaaa;
			}
		}

		.flex-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}

	.onLine {
		color: #22c903;
	}

	.outline {
		color: #aaaaaa;
	}

	/deep/.u-popup__content {
		border-radius: 20rpx;
		width: 90%;
		font-size: 32rpx;
	}

	.popup-content {
		padding: 50rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.other_request {
		box-sizing: border-box;
		text-align: center;
	}
</style>